<template>
    <div>
      <el-button @click="toHome" class="toHome">返回首页</el-button>
      <ul class="menu-tab">
        <li @click="changeType('login')" id="login">登录</li>&nbsp;|
        <li @click="changeType('register')" id="register">注册</li>
      </ul>
      <!--登陆界面-->
      <div class="login_enter" v-show="type === 'login'">
        <loginUsers></loginUsers>
      </div>
      <!--注册界面-->
      <div class="login_register"  v-show="type === 'register'">
        <registerUsers></registerUsers>
      </div>
    </div>
</template>

<script>
  import loginUsers from "../../components/login/loginUsers"
  import registerUsers from "../../components/login/registerUsers"
    export default {
        name: "login",
        components:{
            loginUsers,
          registerUsers
        },
      data(){
          return {
            type:"login",
          }
      },
      created(){
      },
      methods:{
        changeType(val){
          this.type = val;
          let show = document.getElementById(val);
          let login = document.getElementById("login")
          let register = document.getElementById("register")

          login.style.color = register.style.color = "white"

          show.style.color=" #3498db"
        },
        toHome(){
          this.$router.push('/home')
        }
      }
    }
</script>

<style lang="scss" scoped>
.login_enter , .login_register{
  width: 30%;
  margin: auto;
}
  .menu-tab{
    text-align: center;
    li{
      display: inline-block;
      margin: 20px;
      color: white;
    }
    li:hover{
      color: #3498db;
      cursor: pointer;
    }
    li:checked{
      color: #3498db;
    }
    li:nth-child(1){
      color: #3498db;
    }
  }
  .toHome{
    margin-left: 20px;
    margin-top: 20px;
  }
</style>
